<template>
	<view class="center">
		<view class="nav">
			<xbd-select :carId.sync="type" :option.sync="option" :visible.sync="visible" :infoList="typeArr">
				<template>
					<view class="select" @click="visible = true">
						<view class="text">
							{{ type  }}
						</view>
						<image class="image" src="@/static/image/down.svg">
						</image>
					</view>
				</template>
			</xbd-select>
			<view class="box" @click="isRead">
				<image src="@/static/image/personalcenter/noread.png"></image>
				<view class="">
					全部已读
				</view>
			</view>
		</view>
		<uni-swipe-action>
			<uni-list :border="false">
				<uni-swipe-action-item v-for="item in showList" :key="item._id" :show="isOpened">
					<view style="width: 100%;">
						<xbd-msg-card :myInfo="item"></xbd-msg-card>
					</view>
					<template v-slot:right>
						<view :class="['swipe_right',(item.type === 'system' && !item.state) ? 'yes':'no']"
							@click="clickDel(item.type,item._id)">
							<view class="">
								标记已读
							</view>
						</view>
					</template>
				</uni-swipe-action-item>

				<xbd-null-list v-if="!showList.length"></xbd-null-list>
				<xbd-loading-more v-if="showList.length" :status-num="statusNum" :is-load-more="isLoadMore">
				</xbd-loading-more>
			</uni-list>
		</uni-swipe-action>
		<xbd-popup :isShow="showDialog" @dialogConfirm='dialogConfirm' @dialogCancel='dialogCancel' title="全部已读"
			content="确认将全部未读消息设为已读？"></xbd-popup>
	</view>
</template>

<script>
	import {
		Personalcenter
	} from '@/api/index.js';
	export default {
		data() {
			return {
				// 判断是否已读
				showDialog: false,
				statusNum: 0,
				isLoadMore: false,
				read: true,
				value: '',
				isOpened: 'right',
				visible: false,
				type: '全部消息',
				option: '',
				info: {
					page: 1,
					perpage: 10,
					type: ''
				},
				typeArr: [{
						value: '',
						label: '全部消息'
					},
					{
						value: 'system',
						label: '系统消息'
					},
					{
						value: 'risk',
						label: '风险预警通知'
					},
					{
						value: 'duty',
						label: '值带班提醒通知'
					}
				],
				showList: []
			};
		},
		watch: {
			option(n, o) {
				this.info.type = n
				this.info.page = 1
				this.init()
			}
		},
		methods: {
			async clickDel(type, id) {
				console.log('删除')
				if (type == 'system') {
					const res = await Personalcenter.posMessageRead(id);
					if (res.success) {
						this.showList.forEach(item => {
							if (item._id == id) {
								item.state = true
								console.log('res')
							}
						})
					}

					console.log(this.showList, 'this.showList')
				}

			},

			isRead() {
				this.read = !this.read
				this.showDialog = true
			},
			dialogConfirm() {
				//弹出框确认操作
				this.showDialog = false;
				this.allRead()
				console.log("确认")
			},
			dialogCancel() {
				console.log("取消")
				this.showDialog = false;
			},
			async init() {
				
				const res = await Personalcenter.getMessageList(this.info)
				if (res.data.list.length === this.info.perpage) {
					this.isLoadMore = true;
					this.statusNum = 2;
					
				}else{
					this.statusNum = 0;
				}
				console.log(this.statusNum,'adasdadas')
				this.showList = res.data.list
				console.log(res, 'res')
			},
			// 加载更多
			loadmore() {
				this.info.page++;
				this.statusNum = 1;
				this.isLoadMore = true;
				this.loadmoreList();
			},

			async allRead() {
				const res = await Personalcenter.posAllRead();
				if (res.success) {
					this.showList.forEach(item => {
						if (item.type === 'system')
							item.state = true
					})
				}
				console.log(res, 'res')
			},
			async loadmoreList() {
				try {
					const res = await Personalcenter.getMessageList(this.info);
					if (res.data.list.length) {
						this.showList = this.showList.concat(res.data.list);
						if (res.data.list.length === this.info.perpage) {
							this.statusNum = 2;
						} else {
							this.statusNum = 0;
						}
						// this.isLoadMore = false;
					} else {
						this.info.page--;
						this.statusNum = 0;
					}
				} catch (e) {
					uni.hideLoading();
					this.info.page--;
				}
			},
			eventUpdata(val) {
				console.log(val, 'val')
				this.showList.forEach(item => {
					if (item._id == val) {
						item.state = true
						console.log('res')
					}
				})
			}

		},
		onLoad() {
			uni.$on('isread', this.eventUpdata)
			this.init()
		},
		onReachBottom() {
			console.log('出地理')
			// 当下拉组件显示状态 并且显示不是没有数据了 时才进行下拉加载
			if (this.isLoadMore && this.statusNum !== 0) {
				this.loadmore();
			}
		},
		onUnload() {
			uni.$off('isread')
			uni.$emit('msgUpdata')
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-icons {
		margin-right: 20rpx;
	}

	::v-deep .uni-easyinput__content-input {
		font-size: 30rpx;
	}

	.select {
		display: flex;
		justify-content: space-between;
		align-items: center;

		height: 64rpx;
		line-height: 60rpx;
		border-radius: 8rpx;
		border: 2rpx solid #999999;
		box-sizing: border-box;
		padding: 0 20rpx 0 20rpx;
		// color: #BBC0C9 !important;

		.text {
			width: 460rpx;
			color: #000623;
			// text-align: center;
			font-size: 30rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;

		}

		.prColor {
			color: #000623 !important;
		}

		.image {
			transform: rotate(90deg);
			width: 38rpx;
			height: 38rpx;
		}
	}

	.center {
		padding: 32rpx;

		.uni-mt-5 {
			font-size: 30rpx;
		}

		.nav {
			display: flex;
			align-items: center;

			.box {
				font-size: 22rpx;
				margin-left: 40rpx;
				width: 88rpx;
				color: #8890A5;
				margin-top: 4rpx;

				image {
					margin-left: 26rpx;
					width: 30rpx;
					height: 30rpx;
				}
			}

		}
	}

	.swipe_right {
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		width: 216rpx;
		font-size: 32rpx;
		// height: 104rpx;
		margin-left: 20rpx;

	}

	.yes {
		background: #2E73FC;
		color: #FFFFFF;
	}

	.no {
		background: #F3F4F7;
		color: #999999;
	}
</style>
